import { css, Global, keyframes, useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import Css from './Css';
import Demo2 from './Demo';

// const style = css`
//   width: 100px;
//   height: 100px;
//   background: skyblue;
// `

// const style = css({
//   width: 200,
//   height: 200,
//   background: 'pink'
// });

const Button = styled.button`
  width: 100px;
  height: 100px;
  background: ${props => props.bgColor || 'skyblue'};
`;

// const Container = styled.div(props => ({
//   width: 200,
//   height: 200,
//   background: props.bgColor || 'green'
// }));

const Container = styled.div({
  width: 200,
  height: 200,
  background: 'green'
}, props => ({
  background: props.bgColor
}));

function Demo({className}) {
  return <div className={className}>Demo</div>
}

// const Fancy = styled(Demo)`
//   color: red;
// `;

const Fancy = styled(Demo)({
  color: 'red'
});

// const Child = styled.div`
//   color: red;
// `;

// const Parent = styled.div`
//   ${Child} {
//     color: green
//   }
// `

const Child = styled.div({
  color: 'red'
});

const Parent = styled.div({
  [Child]: {
    color: 'green'
  }
});

const Container2 = styled.div`
  width: 200px;
  height: 200px;
  background: skyblue;
  color: pink;
  &:hover {
    background: pink;
  }
  & > span {
    color: yellow;
  }
`;

const base = css`
  background: tomato;
  color: white;
`;
const danger = css`
  background: black;
  color: red;
`;

const styles = css`
  body {
    margin: 0;
  }
  a {
    text-decoration: none;
    color: red; 
  }
`;

const move = keyframes`
  0% {
    left: 0;
    top: 0;
    background: pink;
  }
  100% {
    left: 300px;
    top: 300px;
    background: skyblue;
  }
`;

const box = css`
  width: 100px;
  height: 100px;
  position: absolute;
  animation: ${move} 2s ease infinite alternate;
`;

// const getPrimaryColor = props => css`
//   color: ${props.colors.primary}
// `;

function App() {
  const theme = useTheme();
  const getPrimaryColor = css`
    color: ${theme.colors.primary};
  `;
  return (
    // <div css={{width: 200, height: 200, background: 'red'}}>App works</div>;
    // <div css={style}>App works</div>
    // <Css css={style}/>

    // <Container bgColor={'blue'}>
    //   <Button bgColor={'red'}>我是按钮</Button>
    // </Container>
    // <Fancy/>
    // <div>
    //   <Child>child</Child>
    //   <Parent><Child>child parent</Child></Parent>
    // </div>
    // <Container2>
    //   Container2
    //   <span>span</span>
    // </Container2>
    // <Button as="a" href="#">button</Button>
    // <div css={[base, danger]}>样式组合</div>
    // <div>
    //   <Global styles={styles} />
    //   <a href="#">我是a标记</a>
    //   <Demo2 />
    // </div>
    // <div css={box}>App works</div>
    <div css={getPrimaryColor}>primaryColor</div>
  );
}

export default App;